<template>

     
       <el-container>
        <!-- <el-header>Header</el-header> -->
        <el-main style="height:700px"><mavon-editor style="height: 100%" :subfield = "false"
        :defaultOpen = "'preview'" :value="content"
        :toolbarsFlag = "false"
        :editable="false"
        scrollStyle="true"
        :ishljs = "true"></mavon-editor></el-main>
        <el-footer><el-row :gutter="20">
            <el-col :span="10" :offset="11">
  

            </el-col>
        </el-row></el-footer>
    </el-container>
</template>
 
 <script>
    // Local Registration
    import { mavonEditor } from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'
    import { queryArticle } from "@/api/article"
    export default {
        name: 'details',
        components: {
            mavonEditor
            // or 'mavon-editor': mavonEditor
        },
        data(){
            return{
                content:"**获取腾讯“邮我”的链接发表于 2020-06-16|  分类于 技术杂谈|阅读次数：200|  本文字数： 1.6k |  阅读时长 ≈ 1 分钟腾讯QQ邮箱提供了“邮我”组件，可以放在自己的网站上，让别人点击提供的图片或者链接就可以发Email过来，该文章分享的是如何获取到其中的链接。1、登陆自己的qq邮箱，点击设置，再选择账户，滚动到最底部找到邮我，最后点击使用邮我2、选择我要体验3、选择自己喜欢的样式4、点击获取代码其中href中内容就是我们想要的内容**",
                article:{
                     articleName: this.$route.params.name
                }
               
            }
        },
        created(){
        
            this.queryArticle()
        },
        methods:{
            queryArticle(){       
                queryArticle(this.article).then(res=>{
                    this.content=res.data.data
                })
            }
        }
    }
    </script>
    <style>
    #details {
        margin: auto;
        width: 80%;
        height: 100%;
    }
</style>
